<template>
    <div class="head">
        <div class="left">
          <div v-if="!user" class="user">
            <img @click="openModal" src="../../../static/img/bossVersion/user.png" />
          </div>
          <div v-if="!backspace" class="backspace" @click="space">
            <img src="../../../static/img/bossVersion/left.png" />
            <span class="txt">板块</span>
          </div>
        </div>
        <slot name="title"></slot>
        <div class="right"></div>
    </div>
</template>

<script>
export default {
  props: {
    backspace: {
      type: Boolean,
      default: () => {
        return true;
      }
    },
    user: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  mounted() {},
  methods: {
    openModal() {
      this.$emit("modalShow", true);
    },
    space() {
      this.$router.back(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/bossVersion/_basics";

.head {
  @include flexXjsbYcen;
  height: 0.58rem;
  padding: 0.1rem 0.15rem;
  background-color: rgba(#000, 0.3);
  & > .left,
  & > .right {
    width: 0.5rem;
    height: 0.2rem;
  }
  & > .left {
    // 回退
    & > .backspace {
      @include flexYcen;
      & > img {
        width: 0.08rem;
        height: 0.15rem;
      }
      & > .txt {
        margin-left: 0.05rem;
        color: $color1;
        font-size: 0.15rem;
      }
    }
    // 登录
    & > .user {
      width: 0.2rem;
      height: 0.2rem;
      overflow: hidden;
    }
  }
  & > .title {
    color: $color1;
    @include bold(0.17rem);
    line-height: 1;
  }
}
</style>
